<template>
    <!--TODO 待写-->
    <div class="right-slide displayFlex">
        <div class="slide-wrap displayFlex">
            <div v-if="rtCommont.mediaContents.length > 0 && rtCommont.mediaType == 1" class="right-slide-love store-swiper-wicon flex1 positionR">
                <img class="right-slide-icon store-swiper-icon"  src="../../../assets/images/store/store_swiper_icon.png" alt="">
                <span class="swiper-pagination-img">{{rtCommont.nowSwiperIndex}}/{{rtCommont.mediaContents.length}}</span>
            </div>
            <div class="right-slide-love ">
                <img class="right-slide-icon" @click="rtCollectLike" v-if="!rtCommont.hadLiked" src="../../../assets/images/commonActModel/right_side_love.png" alt="">
                <img class="right-slide-icon" @click="rtCollectCancleLike" v-else src="../../../assets/images/commonActModel/right_side_love_red.png" alt="">
                <p class="right-num">{{rtCommont.dataInfo.likeNum}}</p>
            </div>
            <div class="right-slide-love ">
                <img class="right-slide-icon" @click="showCommentFn" src="../../../assets/images/commonActModel/right_side_talk.png" alt="">
                <p class="right-num">{{rtCommont.dataInfo.commentedNum}}</p>
            </div>
            <div class="right-slide-love ">
                <img class="right-slide-icon" @click="showShareFn" src="../../../assets/images/commonActModel/right_side_share.png" alt="">
                <p class="right-num">{{rtCommont.dataInfo.shareNum}}</p>
            </div>
            <div class="right-slide-love">
                <router-link :to="{path:'/im/chat',query:{storeId:rtCommont.storeId}}">
                    <img class="right-slide-icon" src="../../../assets/images/store/service_icon.png" alt="">
                    <p class="right-num">客服</p>
                </router-link>
            </div>
        </div>
        <transition name="name"
                    enter-active-class="animated fadeIn"
                    leave-active-class="animated fadeOut">
            <share v-if="showShare && rtCommont.isNeedContentShare" @clickFn="showShare = false"></share>
        </transition>
        <comment-list
                ref="commentListRef"
                v-if="showComment"
                :commentListProps="commentListProps"
                @closeComment="closeComment"
                @getSubCommentList="getSubCommentList"
                @deleteComment="deleteComment"
                @doComment="doComment"
                @isLike="isLike"
                @getUserMainComment="getUserMainComment"
        ></comment-list>
        <!--:isCommentSuccess="isCommentSuccess"-->
    </div>
</template>

<script>
    export default {
        name: "rgihtSilde",
        props:{
            rtCommontProps:{
                type:Object,
            },
            commentListProps:{
                type:Object,
            }
        },
        data(){
            return{
                rtCommont:{
                    "dataInfo": {
                        "commentedNum": 0,
                        "visitNum": 0,
                        "shareNum": 0,
                        "likeNum": 0
                    },
                    "mediaContents":[],
                    "hadLiked": false,
                    "storeId": 0,
                    "mediaType": 1,
                    "id":0,
                    "nowSwiperIndex":1,
                    "isNeedContentShare":true
                },
                showShare:false,
                showComment:false,
            }
        },
        mounted(){
            
            this.rtCommont = Object.assign({},this.rtCommont,this.rtCommontProps);
            // console.log(this.rtCommontProps)
        },
        methods:{
            /*对本页点赞*/
            rtCollectLike(){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                let that = this;
                let temp = {
                    hadLiked:true,
                };
                this.rtCommont.dataInfo.likeNum ++ ;
                this.rtCommont = Object.assign({},this.rtCommont,temp);
                this.$emit("isLike",{likeType:that.rtCommont.mediaType,likeKey:that.rtCommont.id,isLike:true});
            },
            rtCollectCancleLike(){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                let that = this;
                let temp = {
                    hadLiked:false,
                };
                this.rtCommont.dataInfo.likeNum -- ;
                this.rtCommont = Object.assign({},this.rtCommont,temp);
                this.$emit("isLike",{likeType:that.rtCommont.mediaType,likeKey:that.rtCommont.id,isLike:false});
            },
            showShareFn(){
                this.showShare = true;
                if( !this.rtCommont.isNeedContentShare ){
                    this.$emit('showShare');
                }
            },
            isLike(obj){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                this.$emit("isLike",obj);
            },
            showCommentFn(){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                this.showComment = true;
                this.$emit('isNotAutoplay',true);
                this.$emit('getUserMainComment',{commentKey:this.rtCommont.id});
            },
            getUserMainComment(obj){
                this.$emit('getUserMainComment',obj);
            },
            closeComment(){
                this.$emit('closeCommentCB');
                this.$emit("isNotAutoplay",false);
                this.showComment = false;
            },
            getSubCommentList(obj){
                this.$emit('getSubCommentList',obj);
            },
            deleteComment(){

            },
            doComment(obj){
                this.$emit('doComment',obj)
            },
            cancleLike(){
                let temp = {
                    islike:false,
                };
                this.rtCommont = Object.assign({},this.rtCommont,temp);
            }
        },
        components:{
            'share':()=>import('../../commonComponents/share/Share'),
            "comment-list":()=>import("../../commonComponents/bottomShow/CommentList"),
        },
        watch:{
            rtCommontProps(val){
                this.rtCommont = Object.assign({},this.rtCommont,val);
            },
        }
    }
</script>

<style scoped>
    .right-slide{
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        -webkit-flex-direction: column;
        flex-direction: column;
        z-index: 1050;
    }
    .right-slide /deep/ .comment{
        left: -3.75rem;
    }
    .right-slide-icon {
        display: block;
        width: .28rem;
        height: .28rem;
        object-fit: contain;
        pointer-events: auto;
    }
    .store-swiper-icon{
        width: .4rem;
        height: .4rem;
        position: relative;
        right: -.075rem;
    }
    .right-num{
        color: #fff;
        font-size: .12rem;
        text-align: center;
        text-shadow: 0 0 .01rem #ccc;
    }
    .swiper-pagination-img{
        white-space: nowrap;
        width: .4rem;
        height: .4rem;
        line-height: .4rem;
        position: absolute;
        text-align: center;
        color: #fff;
        top: 0;
        font-size: .1rem;
        right: -.075rem;
    }
    .slide-wrap{
        max-height: 60%;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: .15rem;
        width: .28rem;
        flex-direction: row-reverse;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
</style>